<template>
  <div class="header-bar">
    <div class="header-bar-left">
      <el-space>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>homepage</el-breadcrumb-item>
          <el-breadcrumb-item>promotion list</el-breadcrumb-item>
        </el-breadcrumb>
      </el-space>
    </div>
    <div class="header-bar-right">
      <el-space>
        <el-button :icon="Setting" circle @click="showSettingDrawer"></el-button>
        <el-button :icon="FullScreen" circle></el-button>
        <el-button :icon="RefreshRight" circle></el-button>
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            {{ username }}
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="center">用户中心</el-dropdown-item>
              <el-dropdown-item command="setting">配置</el-dropdown-item>
              <el-dropdown-item command="logout" divided>退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-drawer v-model="settingDrawer" :direction="drawerDirection">
          <template #header>
            <h4>设置</h4>
          </template>
          <template #default>
            <el-row>
              <el-space
                ><span>主题切换</span>
                <el-switch
                  v-model="themeValue"
                  class="ml-2"
                  inline-prompt
                  @change="themeChange"
                  :active-icon="Sunny"
                  :inactive-icon="Moon"
              /></el-space>
            </el-row>
          </template>
        </el-drawer>
      </el-space>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { Setting, FullScreen, RefreshRight } from "@element-plus/icons-vue";
import { userLogoutApi } from "@/api/user";
import { ElMessage } from "element-plus";
import { Result } from "@/types/common";
import type { DrawerProps } from "element-plus";
import { Sunny, Moon } from "@element-plus/icons-vue";

defineOptions({
  name: "HeaderBar",
});
const router = useRouter();
const username = ref("");
const drawerDirection = ref<DrawerProps["direction"]>("rtl");
const settingDrawer = ref(false);
const themeValue = ref(true);
const handleCommand = (command: string) => {
  if (command == "logout") {
    // 处理用户退出
    userLogoutApi().then((res: Result) => {
      if (res.code != 200) {
        return ElMessage.error(res.message);
      }
      ElMessage.success("退出成功");
      localStorage.removeItem("username");
      localStorage.removeItem("token");
      router.push({
        path: "/login",
      });
    });
  }
};
const showSettingDrawer = () => {
  settingDrawer.value = true;
};
const themeChange = (value: boolean) => {
  console.log("theme change, value", value);
  // 在这里切换样式
};
onMounted(() => {
  username.value = localStorage.getItem("username") || "admin";
});
</script>

<style lang="scss" scoped>
.header-bar {
  padding: 0 20px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  .header-bar-left {
    display: flex;
    align-items: center;
  }
  .header-bar-right {
    display: flex;
    align-items: center;
  }
}
</style>
